<template>
  <div class="customer-detail">
    <el-dialog :visible.sync="isVisible" width="1500px" append-to-body title="人员列表" V-if="isVisible">
      <component :is="'chatsend'" @dialogBeforeClose="dialogBeforeClose"></component>
    </el-dialog>
    <el-dialog :visible.sync="openOrderNumber" append-to-body title="分配达人" width="500px" v-if="openOrderNumber">
      <el-form ref="formApply" :model="formApply">
        <el-form-item label="分配跟进商务(BD)/媒介(PR)" prop="contactPerson">
          <el-input style="width: 200px" v-model="formApply.contactPerson" placeholder="分配达人" />
          <el-button @click="chat" size="mini"> 配置 </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="handledistributionTalent">确 定</el-button>

        <!-- <el-button @click="cancelApply">取消</el-button> -->
      </div>
    </el-dialog>
    <el-dialog :visible.sync="openLabel" append-to-body title="标签管理" width="500px" v-if="openLabel">
      <el-form ref="formLabel" :model="formLabel" label-width="100px" @submit.native.prevent>
        <el-form-item label="标签管理" prop="talentLabel">
          <el-tag style="margin: 2px" :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
            @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
          <!-- <el-input v-model="formLabel.talentLabel" placeholder="标签" /> -->
        </el-form-item>
        <el-form-item label="可选标签" prop="talentLabel">
          <el-tag style="margin: 2px" v-for="dict in TalentLabelList" @click="handleselectLabel(dict)">{{ dict }}</el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="handlesetLabel">确 定</el-button>

        <!-- <el-button @click="cancelApply">取消</el-button> -->
      </div>
    </el-dialog>
    <el-dialog :visible.sync="openContract" append-to-body title="合同管理" width="1500px" v-if="openContract">
      <BiTalentContract :row="row" />
    </el-dialog>
    <!-- 头部信息 -->
    <el-card class="header-card">
      <div class="header-info">
        <h2>{{ row.xhsNickname }}</h2>
        <el-button size="mini" type="primary" @click="handlebuildRelationship">建联</el-button>
        <!-- <el-button size="mini" type="danger">关闭</el-button> -->
        <el-button size="mini" type="primary" @click="handlereleaseTalent">释放</el-button>
        <el-button size="mini" type="primary" @click="handleopenLabel">标签管理</el-button>
        <el-button size="mini" type="danger" @click="handletalentBlock">拉黑</el-button>
        <el-button size="mini" type="primary" @click="openContract = true">合同管理</el-button>
        <div class="meta">
          <span>当前跟进商务/媒介：{{
            row.contactPerson ? row.contactPerson : "管理员"
          }}</span>
          <span>达人信息更新时间：{{ row.updateTime }}</span>
        </div>
      </div>
    </el-card>

    <!-- 主体内容 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="info-card">
          <el-descriptions title="基本信息" :column="3" border>
            <el-descriptions-item label="平台">{{
              row.platform
            }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{
              row.xhsNickname
            }}</el-descriptions-item>
            <el-descriptions-item label="账号ID">{{
              row.platformId
            }}</el-descriptions-item>

            <el-descriptions-item label="粉丝量(W)">{{
              row.fansNum
            }}</el-descriptions-item>
            <el-descriptions-item label="达人层级">{{
              row.talentLevel
            }}</el-descriptions-item>
            <el-descriptions-item label="达人简介">{{
              row.talentIntro
            }}</el-descriptions-item>

            <el-descriptions-item label="图文报价(元)">{{
              row.graphicQuote
            }}</el-descriptions-item>
            <el-descriptions-item label="视频报价(元)">{{
              row.videoQuote
            }}</el-descriptions-item>
            <el-descriptions-item label="直播报价(元)">{{
              row.liveQuote
            }}</el-descriptions-item>

            <el-descriptions-item label="达人备注">{{
              row.remark
            }}</el-descriptions-item>
            <el-descriptions-item label="是否跟进">{{
              row.isFollow == '是' ? '已跟进' : '待跟进'
            }}</el-descriptions-item>
            <el-descriptions-item label="达人主页">{{
              row.homeLink
            }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <!-- 主体内容 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="info-card">
          <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" :key="tabsKey">
            <el-tab-pane label="跟进记录" name="0">
              <BiTalentFollowRecord :key="'follow-' + tabsKey" :row="row" v-if="activeName == 0" />
            </el-tab-pane>
            <el-tab-pane label="联系人信息" name="1">
              <BiTalentContacts :row="row" v-if="activeName == 1" />
            </el-tab-pane>
            <el-tab-pane label="地址信息" name="2">
              <contactindex :row="row" v-if="activeName == 2" />
            </el-tab-pane>
            <el-tab-pane label="样衣记录" name="3">
              <dialogApply :row="row" v-if="activeName == 3" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// src/views/sample/contact/contactindex.vue
// import ContactForm from "./components/ContactForm.vue";
// import Add from "@/views/sample/Add/Add.vue";
import {
  listBiTalentFollowRecord,
  getBiTalentFollowRecord,
  delBiTalentFollowRecord,
  addBiTalentFollowRecord,
  updateBiTalentFollowRecord,
} from "@/api/talent/BiTalentFollowRecord";
import contactindex from "@/views/sample/contact/contactindex.vue";
import BiTalentFollowRecord from "@/views/talent/BiTalentFollowRecord/index.vue";
import BiTalentContacts from "@/views/talent/BiTalentContacts/index.vue";
import BiTalentContract from "@/views/talent/BiTalentContract/BiTalentContractindex.vue";

import dialogApply from "@/views/sample/bootcommon/dialogApply"; // 新建页面

import chatsend from "@/views/sample/bootcommon/chatsend.vue";
import {
  releaseTalent,
  distributionTalent,
  setLabel,
  talentBlock,
  selectTalentLabel,
  buildRelationship,
} from "@/api/talent/Detail";
export default {
  components: {
    contactindex,
    BiTalentFollowRecord,
    BiTalentContacts,
    BiTalentContract,
    dialogApply,
    chatsend,
  },
  props: {
    row: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      tabsKey: 0, // 新增tabsKey控制刷新
      BiTalentFollowRecordList: [],
      TalentLabelList: [],
      count: 0,
      activeName: 0,
      formLabel: {},
      openLabel: false,
      formApply: {},
      openOrderNumber: false,
      openContract: false,
      isVisible: false,

      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
    };
  },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        this.selectTalentLabelByid();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    selectTalentLabel().then((response) => {
      this.TalentLabelList = response;
    });
  },
  methods: {
    handleContract(row) {
      this.row = row;
      this.openContract = true;
    },
    handleClick(tab, event) { },
    //拉黑
    handletalentBlock() {
      talentBlock({ id: this.row.id }).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("已拉黑达人");
          // 增加tabsKey值强制刷新tabs组件
          this.tabsKey += 1;
          this.count++;
        }
      });
    },
    //释放
    handlereleaseTalent() {
      releaseTalent({ id: this.row.id }).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("已释放达人");
          // 增加tabsKey值强制刷新tabs组件
          this.tabsKey += 1;
          this.count++;
        }
      });
    },
    handlebuildRelationship() {
      buildRelationship({ id: this.row.id }).then((response) => {
        this.$modal.msgSuccess("已建联");
        // 增加tabsKey值强制刷新tabs组件
        this.tabsKey += 1;
      });
    },
    //分配达人
    handledistributionTalent() {
      let obj = {
        query: { contactPerson: this.formApply.contactPerson, id: this.row.id },
        // data: this.row,
      };
      distributionTalent(obj).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("已分配达人");
          this.openOrderNumber = false;
          // 增加tabsKey值强制刷新tabs组件
          this.tabsKey += 1;
          this.count++;
          // listBiTalentFollowRecord({ pageNum: 1, pageSize: 1000 }).then(
          //   (response) => {
          //     this.BiTalentFollowRecordList = response.rows;
          //   }
          // );
        }
      });
    },
    //标签
    selectTalentLabelByid() {
      selectTalentLabel({ talentId: this.row.platformId }).then((response) => {
        this.formLabel.talentLabel = response;
        this.dynamicTags = response;
      });
    },
    handleselectLabel(dict) {
      if (this.dynamicTags.includes(dict)) {
        this.$modal.msgError("该标签已存在");
        return;
      }
      this.dynamicTags.push(dict);
    },
    handleopenLabel() {
      this.selectTalentLabelByid();
      this.openLabel = true;
    },

    //标签
    handlesetLabel() {
      let talentLabel = this.dynamicTags.join(",");
      let obj = {
        query: { talentLabel: talentLabel, id: this.row.id },
        // data: this.row,
      };
      setLabel(obj).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("已分配标签");
          this.openLabel = false;
          this.count++;
        }
      });
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (this.dynamicTags.includes(inputValue)) {
        this.$modal.msgError("该标签已存在");
        return;
      }
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //通知按钮打开
    chat(row) {
      this.isVisible = true;
    },
    clear() {
      this.formApply.contactPerson = null;
    },
    dialogBeforeClose(userNameList) {
      this.formApply.contactPerson = userNameList[0];
      this.isVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tab-pane {
  overflow-y: auto;
  height: calc(100vh - 110px);
}

::v-deep .el-tabs__content {
  /* height: 185px;
  border-radius: 4px; */
  // background-color: rgb(240, 242, 245) !important; /* 使用你想要的蓝色 */
}

.customer-detail {
  // padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-card {
  // margin-bottom: 16px;

  .header-info {
    h2 {
      display: inline-block;
      margin-right: 15px;
    }

    .meta {
      margin-top: 10px;
      color: #909399;
      font-size: 14px;

      span {
        margin-right: 20px;
      }
    }
  }
}

.action-card {
  .section {
    margin-bottom: 25px;

    h3 {
      margin-bottom: 12px;
      color: #409eff;
    }

    .el-button {
      width: 100%;
      margin-bottom: 8px;
    }
  }
}

.info-card {
  margin-top: 16px;
}

.alert-box {
  margin: 20px 0;
}

.alert-box {
  margin: 20px 0;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 10px;
  line-height: 30px;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>